import { View, Text, Input, Button } from '@tarojs/components'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './login.scss'

const isH5 = () => {
  return process.env.TARO_ENV === 'h5'
}

const isMiniProgram = () => {
  return process.env.TARO_ENV === 'weapp'
}

export default function Login() {
  // 严格平台检测：禁止小程序访问
  useEffect(() => {
    if (isMiniProgram()) {
      // 小程序环境下显示提示并强制返回
      Taro.showModal({
        title: '访问限制',
        content: '登录功能仅限H5端使用，请在浏览器中打开',
        showCancel: false,
        success: () => {
          // 强制返回上一页或首页
          Taro.navigateBack({
            fail: () => {
              // 如果无法返回，则跳转到首页
              Taro.reLaunch({
                url: '/pages/index/index'
              })
            }
          })
        }
      })
      return
    }
  }, [])

  // 如果是小程序环境，直接返回空白页面
  if (isMiniProgram()) {
    return (
      <View className='login-container'>
        <View className='login-header'>
          <Text className='login-title'>访问受限</Text>
          <Text className='login-subtitle'>此页面仅限H5端访问</Text>
        </View>
      </View>
    )
  }
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)

  const handleLogin = async () => {
    if (!username.trim()) {
      alert('请输入用户名')
      return
    }

    if (!password.trim()) {
      alert('请输入密码')
      return
    }

    setLoading(true)
    
    try {
      // 这里可以添加实际的登录API调用
      // const response = await loginAPI(username, password)
      
      // 模拟登录延迟
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 模拟登录成功
      alert('登录成功')
      
      // 登录成功后跳转到主页
      setTimeout(() => {
        Taro.reLaunch({
          url: '/pages/index/index'
        })
      }, 1000)
      
    } catch (error) {
      console.error('登录失败:', error)
      alert('登录失败，请重试')
    } finally {
      setLoading(false)
    }
  }

  return (
    <View className='login-container'>
      <View className='login-header'>
        <Text className='login-title'>用户登录系统</Text>
        <Text className='login-subtitle'>请输入您的账号信息</Text>
      </View>
      
      <View className='login-form'>
        <View className='form-item'>
          <Text className='form-label'>用户名</Text>
          <Input
            className='form-input'
            type='text'
            placeholder='请输入用户名'
            value={username}
            onInput={(e) => setUsername(e.detail.value)}
          />
        </View>
        
        <View className='form-item'>
          <Text className='form-label'>密码</Text>
          <Input
            className='form-input'
            type='password'
            placeholder='请输入密码'
            value={password}
            onInput={(e) => setPassword(e.detail.value)}
          />
        </View>
        
        <Button
          className='login-button'
          type='primary'
          disabled={loading}
          onClick={handleLogin}
        >
          {loading ? '登录中...' : '登录'}
        </Button>
      </View>
      
      {isH5() && (
        <View className='login-footer'>
          <Text className='footer-text'>H5 登录页面</Text>
        </View>
      )}
    </View>
  )
}